import React, {useEffect} from 'react';
import {Button, Checkbox, Form, Input, Select, Space} from "antd";
import {OptionType, QuestionRadioPropsType} from "./interface";
import {MinusCircleOutlined} from '@ant-design/icons'
import {nanoid} from "@reduxjs/toolkit";

const PropComponent: React.FC<QuestionRadioPropsType> = (props: QuestionRadioPropsType) => {
  const {
    title = '', isVertical = false,
    value = '', options = [],
    onChange, disabled
  } = props
  const [form] = Form.useForm()
  console.log('props0', props)

  function handleChange() {
    console.log('form.getFieldsValue()', form.getFieldsValue())
    if (!onChange) return
    const newValues = form.getFieldsValue() as QuestionRadioPropsType
    const {options = []} = newValues
    options?.forEach(opt => {
      if (opt.value) return
      opt.value = nanoid(5)
    })
    onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({title, isVertical, value, options})
  }, [title, isVertical, value, options]);
  return (
    <Form layout={"vertical"} form={form}
          initialValues={{title, isVertical, value, options}}
          disabled={disabled}
          onValuesChange={handleChange}
    >
      <Form.Item label={'标题'} name={'title'} rules={[{required: true, message: '请输入标题'}]}>
        <Input/>
      </Form.Item>
      <Form.Item label={'选项'}>
        <Form.List name='options'>
          {
            (fields, {add, remove}) => (
              <>
                {
                  fields.map(({key, name}, index) => {
                    console.log('key', key, 'name', name)
                    return <Space key={key}>
                      <Form.Item name={[name, 'text']}
                                 rules={[
                                   {required: true, message: '请输入选项文字'},
                                   {
                                     validator: (_, text) => {
                                       const {options = []} = form.getFieldsValue()
                                       console.log('请输入选项文字', options, text, _)
                                       let num = 0
                                       options.forEach((it: OptionType) => {
                                         if (it.text === text) {
                                           num++
                                           console.log('重复了', it.text)
                                         }
                                       })
                                       if (num === 1) return Promise.resolve()
                                       return Promise.reject(new Error('和其他选项重复了'))
                                     }
                                   }
                                 ]}>
                        <Input placeholder={'请输入选项文字'}/>
                      </Form.Item>
                      <Form.Item>
                        {
                          fields.length > 2 && (
                            <MinusCircleOutlined className="dynamic-delete-button"
                                                 onClick={() => remove(name)}/>
                          )
                        }
                      </Form.Item>
                    </Space>
                  })
                }
                <Form.Item>
                  <Button type={'link'} onClick={() => {
                    add({text: '', value: ''})
                  }}>添加</Button>
                </Form.Item>
              </>)
          }

        </Form.List>

      </Form.Item>
      <Form.Item label={'默认选择'} name={'value'}>
        <Select options={options.map(({value, text}) => ({value, label: text || ''}))}></Select>
      </Form.Item>
      <Form.Item label={'居中'} name={'isVertical'} valuePropName={'checked'}>
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
